<template>
  <div>
    <el-form class="editInfo" ref="editInfo" :inline="false" :model="editInfo.data" :rules="editInfo.rules"
             size="small"
             label-width="120px">
      <el-row>
        <el-form-item label="劳务合同" prop="laborContractUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.laborContractListData"
                      :key="`laborContract${index}`">
                    <p>{{item.fileName}}</p>
                    <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleExportLaborContract(item.id)"><i
                            class="el-icon-download"></i></span>
                      <span class="el-upload-list__item-delete" @click="handleRemoveLaborContract(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;"
                   v-show="editInfo.data.laborContractUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.laborContractPercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="laborContract-box"
                   style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-laborContract" class="el-upload el-upload--picture-card"
                     style="display: inline-block;">
                  <i
                    class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传PDF文档！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="简历照片(二寸)" prop="photoUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.photoListData"
                      :key="`photoUrl${index}`">
                    <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                         class="el-upload-list__item-thumbnail">
                    <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                            class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete" @click="handleRemovePhoto(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;" v-show="editInfo.data.photoUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.photoPercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="photo-box"
                   style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-photo" class="el-upload el-upload--picture-card" style="display: inline-block;">
                  <i
                    class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传图片！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="证件照片" prop="idPhotoUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.idPhotoListData"
                      :key="`idPhoto${index}`">
                    <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                         class="el-upload-list__item-thumbnail">
                    <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                            class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete" @click="handleRemoveIdPhoto(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;" v-show="editInfo.data.idPhotoUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.idPhotoPercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="idPhoto-box" style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-idPhoto" class="el-upload el-upload--picture-card" style="display: inline-block;">
                  <i
                    class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传图片！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="离职证明" prop="certLeaveUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.certLeaveListData"
                      :key="`certLeave${index}`">
                    <p>{{item.fileName}}</p>
                    <div class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handleExportCertLeave(item.id)"><i
                          class="el-icon-download"></i></span>
                      <span class="el-upload-list__item-delete" @click="handleRemoveCertLeave(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;" v-show="editInfo.data.certLeaveUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.certLeavePercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="certLeave-box"
                   style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-certLeave" class="el-upload el-upload--picture-card"
                     style="display: inline-block;">
                  <i
                    class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传word或者PDF文档！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="个人简历" prop="resumeUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.resumeListData"
                      :key="`resume${index}`">
                    <p>{{item.fileName}}</p>
                    <div class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handleExportResume(item.id)"><i
                          class="el-icon-download"></i></span>
                      <span class="el-upload-list__item-delete" @click="handleRemoveResume(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;" v-show="editInfo.data.resumeUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.resumePercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="resume-box" style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-resume" class="el-upload el-upload--picture-card" style="display: inline-block;">
                  <i
                    class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传word或者PDF文档！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <!--<el-row>

      </el-row>-->
      <el-row>
        <el-form-item label="学位证书" prop="diplomaUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.diplomaListData"
                      :key="`diploma${index}`">
                    <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                         class="el-upload-list__item-thumbnail">
                    <div class="el-upload-list__item-actions">
                          <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                            class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete" @click="handleRemoveDiploma(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;" v-show="editInfo.data.diplomaUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.diplomaPercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="diploma-box" style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-diploma" class="el-upload el-upload--picture-card" style="display: inline-block;">
                  <i
                    class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传图片！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="毕业证书" prop="graduationCertificatUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.graduationCertificatListData"
                      :key="`graduationCertificat${index}`">
                    <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                         class="el-upload-list__item-thumbnail">
                    <div class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview"
                                  @click="handleViewBigPic(item.id)"><i
                              class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete"
                            @click="handleRemoveGraduationCertificat(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;"
                   v-show="editInfo.data.graduationCertificatUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.graduationCertificatPercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="graduationCertificat-box"
                   style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-graduationCertificat" class="el-upload el-upload--picture-card"
                     style="display: inline-block;"><i
                  class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传图片！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="其他附件" prop="otherAccessoryUrl">
          <el-row>
            <el-col :span="24">
              <div style="display: inline-block;float:left;">
                <ul class="el-upload-list el-upload-list--picture-card" style="float: left; height: 75px;">
                  <li tabindex="0" class="el-upload-list__item"
                      v-for="(item,index) in editInfo.data.otherAccessoryListData"
                      :key="`otherAccessory${index}`" v-if="editInfo.data.otherAccessoryUrl">
                    <img :src="`${basePicPath}/tool/file/view?fileId=${item.id}`"
                         class="el-upload-list__item-thumbnail">
                    <div class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handleViewBigPic(item.id)"><i
                              class="el-icon-zoom-in"></i></span>
                      <span class="el-upload-list__item-delete" @click="handleRemoveOtherAccessory(index)"><i
                        class="el-icon-delete"></i></span>
                    </div>
                  </li>
                </ul>
              </div>
              <div style="display: inline-block;float:left; margin-right: 10px;"
                   v-show="editInfo.data.otherAccessoryUpload">
                <el-progress type="dashboard" :percentage="editInfo.data.otherAccessoryPercent" :color="colors"
                             :width="75"></el-progress>
              </div>
              <div id="otherAccessory-box"
                   style="position: relative; display: inline-block; width: 70px; height: 70px;">
                <div id="upload-otherAccessory" class="el-upload el-upload--picture-card"
                     style="display: inline-block;"><i
                  class="el-icon-plus"></i>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="color: #999;">提示：请上传图片！</div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
    </el-form>
    <el-dialog :visible.sync="viewBigPicInfo.visible" append-to-body>
      <div style="text-align: center;">
        <img :src="`${basePicPath}/tool/file/view?fileId=${viewBigPicInfo.url}`" alt=""
             style="display: inline-block; max-width: 100%;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // import { debounce } from 'lodash'
  import { basePicPath } from '@/config/config'
  import { isJSON } from '@/utils/utils'
  import commonMixins from '@/mixins/common'
  import upload from '@/mixins/upload'

  export default {
    name: 'RecordEditFiles',
    mixins: [commonMixins, upload],
    components: {},
    data() {
      return {
        basePicPath,
        dialog: {
          visible: false // 是否显示
        },
        formParams: { // 编辑需要的参数
          laborContractListData: [], // 劳务合同列表
          laborContractUrl: '', // 劳务合同
          laborContractPercent: 0, // 劳务合同上传进度
          laborContractUpload: false, // 劳务合同是否上传
          photoListData: [], // 二寸照片列表
          photoUrl: '', // 二寸照片
          photoPercent: 0, // 二寸照片上传进度
          photoUpload: false, // 二寸照片是否上传
          idPhotoListData: [], // 证件照片列表
          idPhotoUrl: '', // 证件照片
          idPhotoPercent: 0, // 证件照片上传进度
          idPhotoUpload: false, // 证件照片是否上传
          certLeaveListData: [], // 离职证明列表
          certLeaveUrl: '', // 离职证明
          certLeavePercent: 0, // 离职证明上传进度
          certLeaveUpload: false, // 离职证明是否上传
          resumeListData: [], // 个人简历列表
          resumeUrl: '', // 个人简历
          resumePercent: 0, // 个人简历上传进度
          resumeUpload: false, // 个人简历是否上传
          diplomaListData: [], // 学位证书列表
          diplomaUrl: '', // 学位证书
          diplomaPercent: 0, // 学位证书上传进度
          diplomaUpload: false, // 学位证书是否上传
          graduationCertificatListData: [], // 毕业证书列表
          graduationCertificatUrl: '', // 毕业证书
          graduationCertificatPercent: 0, // 毕业证书上传进度
          graduationCertificatUpload: false, // 毕业证书是否上传
          otherAccessoryListData: [], // 其他附件列表
          otherAccessoryUrl: '', // 其他附件
          otherAccessoryPercent: 0, // 其他附件上传进度
          otherAccessoryUpload: false // 其他附件是否上传
        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            laborContractUrl: [
              { required: true, message: '请选择上传劳务合同', trigger: 'change' }
            ],
            photoUrl: [
              { required: true, message: '请上传简历照片(二寸)', trigger: 'change' }
            ]
          },
          disabled: false, // 处理编辑，某些项禁止编辑
          laborContractInstance: undefined, // 劳务合同
          photoInstance: undefined, // 二寸照片
          idPhotoInstance: undefined, // 证件照片
          certLeaveInstance: undefined, // 离职证明
          resumeInstance: undefined, // 个人简历
          diplomaInstance: undefined, // 学位证书
          graduationCertificatInstance: undefined, // 毕业证书
          otherAccessoryInstance: undefined // 其他附件
        },
        viewBigPicInfo: { // 查看大图
          visible: false,
          url: ''
        },
        detailInfo: null,
        percentage: 10,
        colors: [
          { color: '#f56c6c', percentage: 20 },
          { color: '#e6a23c', percentage: 40 },
          { color: '#5cb87a', percentage: 60 },
          { color: '#1989fa', percentage: 80 },
          { color: '#6f7ad3', percentage: 100 }
        ]
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      },
      formValue: {
        type: Object,
        default() {
          return {}
        }
      },
      tabsSelectedId: {
        type: [Number, String],
        default: ''
      }
    },
    computed: {},
    methods: {
      filesToString(data = []) { // 附件列表转成字符串
        data = data || []
        let files = data.map((item) => {
          return JSON.stringify(item)
        })
        return files.join('@@**%%')
      },
      filesToArray(data = '') { // 附件列表转成数组
        if (!data || data === 'null' || data === 'undefined') {
          return []
        } else {
          let files = data.split('@@**%%')
          files = files.filter((item) => {
            return isJSON(item)
          })
          return files.map((item) => {
            return JSON.parse(item)
          })
        }
      },
      handleRemovePhoto(index) { // 删除简历照片附件(2寸)
        this.editInfo.photoInstance.splice(index, 1)
        this.editInfo.data.photoListData.splice(index, 1)
      },
      handleRemoveIdPhoto(index) { // 删除证件照片附件
        this.editInfo.idPhotoInstance.splice(index, 1)
        this.editInfo.data.idPhotoListData.splice(index, 1)
      },
      handleRemoveCertLeave(index) { // 删除离职证明附件
        this.editInfo.certLeaveInstance.splice(index, 1)
        this.editInfo.data.certLeaveListData.splice(index, 1)
      },
      handleExportCertLeave(data) { // 导出离职证明
        this.$emit('on-export', {
          name: this.certLeaveName,
          fileName: data
        })
      },
      handleRemoveLaborContract(index) { // 删除劳务合同附件
        this.editInfo.laborContractInstance.splice(index, 1)
        this.editInfo.data.laborContractListData.splice(index, 1)
      },
      handleExportLaborContract(data) { // 导出劳务合同
        this.$emit('on-export', {
          name: this.laborContractName,
          fileName: data
        })
      },
      handleRemoveResume(index) { // 删除个人简历附件
        this.editInfo.resumeInstance.splice(index, 1)
        this.editInfo.data.resumeListData.splice(index, 1)
      },
      handleExportResume(data) { // 导出个人简历
        this.$emit('on-export', {
          name: this.resumeName,
          fileName: data
        })
      },
      handleRemoveDiploma(index) { // 删除学位证书附件
        this.editInfo.diplomaInstance.splice(index, 1)
        this.editInfo.data.diplomaListData.splice(index, 1)
      },
      handleRemoveGraduationCertificat(index) { // 删除毕业证书附件
        this.editInfo.graduationCertificatInstance.splice(index, 1)
        this.editInfo.data.graduationCertificatListData.splice(index, 1)
      },
      handleRemoveOtherAccessory(index) { // 删除其他附件
        this.editInfo.otherAccessoryInstance.splice(index, 1)
        this.editInfo.data.otherAccessoryListData.splice(index, 1)
      },
      handleViewBigPic(data) { // 查看大图
        this.viewBigPicInfo.visible = true
        this.viewBigPicInfo.url = data
      },
      async initUpload() { // 初始化上传
        if (this.editInfo.resumeInstance) this.editInfo.resumeInstance.destroy()
        if (this.editInfo.certLeaveInstance) this.editInfo.certLeaveInstance.destroy()
        if (this.editInfo.laborContractInstance) this.editInfo.laborContractInstance.destroy()
        if (this.editInfo.idPhotoInstance) this.editInfo.idPhotoInstance.destroy()
        if (this.editInfo.diplomaInstance) this.editInfo.diplomaInstance.destroy()
        if (this.editInfo.graduationCertificatInstance) this.editInfo.graduationCertificatInstance.destroy()
        if (this.editInfo.otherAccessoryInstance) this.editInfo.otherAccessoryInstance.destroy()
        if (this.editInfo.photoInstance) this.editInfo.photoInstance.destroy()
        this.$nextTick(() => {
          // 二寸照片初始化
          this.initPlupload({
            container: 'photo-box',
            selectFiles: 'upload-photo',
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.photoInstance = instance
            this.editInfo.photoInstance.init()
            this.editInfo.photoInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.photoUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.photoInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.photoPercent = filePercent
            })
            this.editInfo.photoInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.photoListData.push(fileInfo)
            })
            this.editInfo.photoInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.photoPercent = 0
              this.editInfo.data.photoUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 证件照片初始化
          this.initPlupload({
            container: 'idPhoto-box',
            selectFiles: 'upload-idPhoto',
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.idPhotoInstance = instance
            this.editInfo.idPhotoInstance.init()
            this.editInfo.idPhotoInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.idPhotoUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.idPhotoInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.idPhotoPercent = filePercent
            })
            this.editInfo.idPhotoInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.idPhotoListData.push(fileInfo)
            })
            this.editInfo.idPhotoInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.idPhotoPercent = 0
              this.editInfo.data.idPhotoUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 离职证明初始化
          this.initPlupload({
            container: 'certLeave-box',
            selectFiles: 'upload-certLeave',
            mimeTypes: [
              { title: 'Word files', extensions: 'doc,docx' },
              { title: 'PDF files', extensions: 'pdf' }
            ],
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.certLeaveInstance = instance
            this.editInfo.certLeaveInstance.init()
            this.editInfo.certLeaveInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.certLeaveUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.certLeaveInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.certLeavePercent = filePercent
            })
            this.editInfo.certLeaveInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.certLeaveListData.push(fileInfo)
            })
            this.editInfo.certLeaveInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.certLeavePercent = 0
              this.editInfo.data.certLeaveUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 个人简历初始化
          this.initPlupload({
            container: 'resume-box',
            selectFiles: 'upload-resume',
            mimeTypes: [
              { title: 'Word files', extensions: 'doc,docx' },
              { title: 'PDF files', extensions: 'pdf' }
            ],
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.resumeInstance = instance
            this.editInfo.resumeInstance.init()
            this.editInfo.resumeInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.resumeUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.resumeInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.resumePercent = filePercent
            })
            this.editInfo.resumeInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.resumeListData.push(fileInfo)
            })
            this.editInfo.resumeInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.resumePercent = 0
              this.editInfo.data.resumeUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 劳务合同初始化
          this.initPlupload({
            container: 'laborContract-box',
            selectFiles: 'upload-laborContract',
            mimeTypes: [
              { title: 'PDF files', extensions: 'pdf' }
            ],
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.laborContractInstance = instance
            this.editInfo.laborContractInstance.init()
            this.editInfo.laborContractInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.laborContractUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.laborContractInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.laborContractPercent = filePercent
            })
            this.editInfo.laborContractInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.laborContractListData.push(fileInfo)
            })
            this.editInfo.laborContractInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.laborContractPercent = 0
              this.editInfo.data.laborContractUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 学位证书初始化
          this.initPlupload({
            container: 'diploma-box',
            selectFiles: 'upload-diploma',
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.diplomaInstance = instance
            this.editInfo.diplomaInstance.init()
            this.editInfo.diplomaInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.diplomaUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.diplomaInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.diplomaPercent = filePercent
            })
            this.editInfo.diplomaInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.diplomaListData.push(fileInfo)
            })
            this.editInfo.diplomaInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.diplomaPercent = 0
              this.editInfo.data.diplomaUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 毕业证书初始化
          this.initPlupload({
            container: 'graduationCertificat-box',
            selectFiles: 'upload-graduationCertificat',
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.graduationCertificatInstance = instance
            this.editInfo.graduationCertificatInstance.init()
            this.editInfo.graduationCertificatInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.graduationCertificatUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.graduationCertificatInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.graduationCertificatPercent = filePercent
            })
            this.editInfo.graduationCertificatInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.graduationCertificatListData.push(fileInfo)
            })
            this.editInfo.graduationCertificatInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.graduationCertificatPercent = 0
              this.editInfo.data.graduationCertificatUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
          // 其他附件初始化
          this.initPlupload({
            container: 'otherAccessory-box',
            selectFiles: 'upload-otherAccessory',
            employee: this.formValue
          }).then((instance) => {
            this.editInfo.otherAccessoryInstance = instance
            this.editInfo.otherAccessoryInstance.init()
            this.editInfo.otherAccessoryInstance.bind('handleBeforeUpload', (up) => {
              this.editInfo.data.otherAccessoryUpload = true
              up.disableBrowse(true)
            })
            this.editInfo.otherAccessoryInstance.bind('handleUploadProgress', (up, filePercent) => {
              this.editInfo.data.otherAccessoryPercent = filePercent
            })
            this.editInfo.otherAccessoryInstance.bind('handleFileUploaded', (up, fileInfo) => {
              // up.splice(0, 1)
              this.editInfo.data.otherAccessoryListData.push(fileInfo)
            })
            this.editInfo.otherAccessoryInstance.bind('handleInitPercent', (up) => {
              this.editInfo.data.otherAccessoryPercent = 0
              this.editInfo.data.otherAccessoryUpload = false
              up.disableBrowse(false)
            })
          }).catch((error) => {
            this.$notify.error({
              title: '错误',
              message: error.message
            })
          })
        })
      },
      async resetEditData(data = null) { // 重置编辑表单
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = JSON.parse(JSON.stringify(this.formParams))
        if (data) { // 编辑
          // this.editInfo.id = data.uuid
          this.editInfo.id = data.id
          Object.keys(this.formParams).forEach((item) => {
            this.editInfo.data[item] = data[item]
          })

          this.editInfo.data.photoListData = this.filesToArray(this.editInfo.data.photoUrl)
          this.editInfo.data.idPhotoListData = this.filesToArray(this.editInfo.data.idPhotoUrl)
          this.editInfo.data.certLeaveListData = this.filesToArray(this.editInfo.data.certLeaveUrl)
          this.editInfo.data.resumeListData = this.filesToArray(this.editInfo.data.resumeUrl)
          this.editInfo.data.laborContractListData = this.filesToArray(this.editInfo.data.laborContractUrl)
          this.editInfo.data.diplomaListData = this.filesToArray(this.editInfo.data.diplomaUrl)
          this.editInfo.data.graduationCertificatListData = this.filesToArray(this.editInfo.data.graduationCertificatUrl)
          this.editInfo.data.otherAccessoryListData = this.filesToArray(this.editInfo.data.otherAccessoryUrl)

          this.editInfo.disabled = true
        }
      },
      async initData(data = null) { // 初始化数据
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible: {
        handler: function(newVal, oldVal) {
          if (newVal !== this.dialog.visible) {
            this.dialog.visible = newVal
            if (newVal) {
              this.initData(this.detailData)
            }
          }
        },
        immediate: true
      },
      detailData: {
        handler: function(newVal, oldVal) {
          this.initData(newVal)
        },
        deep: true,
        immediate: true
      },
      tabsSelectedId: {
        handler: function(newVal, oldVal) {
          if (newVal === 'recordEditFiles') {
            let { name, phone } = this.editInfo.data
            if (!name || !phone) {
              this.$notify.warning({
                title: '警告',
                message: '上传附件前必须输入姓名和电话！'
              })
            }
            this.initUpload()
          }
        },
        immediate: true
      },
      'editInfo.data': {
        handler: function(newVal, oldVal) {
          // console.log(newVal)
          this.$emit('on-input', newVal)
        },
        deep: true,
        immediate: true
      },
      'editInfo.data.photoListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.photoUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.idPhotoListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.idPhotoUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.certLeaveListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.certLeaveUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.resumeListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.resumeUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.laborContractListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.laborContractUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.diplomaListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.diplomaUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.graduationCertificatListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.graduationCertificatUrl = this.filesToString(newVal)
        },
        deep: true
      },
      'editInfo.data.otherAccessoryListData': {
        handler: function(newVal, oldVal) {
          this.editInfo.data.otherAccessoryUrl = this.filesToString(newVal)
        },
        deep: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .edit-box {
    & /deep/ .el-dialog {
      min-width: 900px;
      max-width: 1200px;
    }

    & /deep/ .el-dialog__body {
      padding: 10px 20px 30px;
    }

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }
  }

  .editInfo {
    margin-right: 0;

    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
  }

  .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 68px;
    display: none;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions span + span {
    margin-left: 8px;
  }

</style>
